export {}
// 1. 封装格式化时间函数，支持 Date 和 string 格式的时间，转换成功 `10:10:10` 时分秒
const formatTime = (date?: Date | string): string => {
  // 第一种是不传递参数
  if (!date) date = new Date()
  // 第二种是传递的参数为字符串格式
  if (typeof date === 'string') date = new Date(date)
  const h = date.getHours()
  const m = date.getMinutes()
  const s = date.getSeconds()
  return `${h}:${m}:${s}`
}

// 2. 定义访问记录单项 对象 类型，定义访问记录 列表 类型，需要存储在本地的 key 字面量类型
type Data = {
  count: number
  time: string
}

type list = Array<Data>

const key = 'ts-demo-data'

// 3. 封装获取访问历史记录函数，返回类型是  记录列表

const getData = () => {
  const str = localStorage.getItem(key)
  return JSON.parse(str || '[]') as list
}

// 4. 封装修改访问历史记录函数
const updateData = () => {
  const list = getData()
  const lastItem = list[list.length - 1]
  const data: Data = {
    count: lastItem ? lastItem.count + 1 : 1,
    time: formatTime(),
  }
  list.push(data)
  // 向本地存储
  localStorage.setItem(key, JSON.stringify(list))
}

// 5. 封装一个展示访问历史记录函数，且调用
const render = () => {
  updateData()
  const data = getData()
  const app = document.querySelector('#app') as HTMLDivElement
  app.innerHTML = data.map((item) => `刷新的次数：${item.count}, 刷新的时间为: ${item.time}`).join('<br/>')
}

render()
